<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>校验用户身份</title>
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
</head>
<style>
    html, body {
        margin: 0;
        padding: 0;
        height: 100%;
    }
    
    body {
        display: flex;
        position: relative;
        background-color: #689CFF;
    }
    
    #msg {
        text-align: center;
        position: absolute;
        bottom: 60px;
        width: 100%;
        color: #A9B6C1;
    }
    
    #login-box {
        display: flex;
        align-items: center;
        margin: auto;
        height: 600px;
    }
    
    #login-box>img {
        height: 100%;
    }
    
    form {
        padding: 70px 150px;
        display: flex;
        flex-direction: column;
        background-color: #fff;
        border-radius: 0 8px 8px 0;
        width: 600px;
        height: 100%;
        box-sizing: border-box;
        position: relative;
        align-items: center;
        justify-content: center;
    }
    
    form>img {
        position: absolute;
        top: 0;
        right: 60px;
    }
    
    form>div {
        width: 100%;
    }
    
    form>div>div {
        margin-bottom: 32px;
    }
    
    form>div>div>input {
        height: 48px;
        border-radius: 4px;
        border: 1px solid #CFD0E0;
        width: 100%;
        font-size: 16px;
        padding: 0 10px;
        margin-top: 16px;
    }
    
    form>div>p:nth-of-type(1) {
        color: #5C97FF;
        font-size: 32px;
        line-height: 32px;
    }
    
    form>div>p:nth-of-type(2) {
        color: #A49CB4;
        line-height: 16px;
        margin-top: 16px;
        margin-bottom: 32px;
    }
    
    form input[type="submit"] {
        margin-top: 48px;
        background-color: #5794FF;
        border-radius: 25px;
        border: none;
        width: 100%;
        height: 40px;
        line-height: 40px;
        font-size: 16px;
        color: #fff;
        cursor: pointer;
    }
    
    @media screen and (max-width: 1000px) {
        #login-box>img {
            display: none;
        }
        #login-box {
            display: flex;
            align-items: center;
            margin: auto;
            height: 25rem;
        }
        form {
            padding: 1rem;
            border-radius: 0.5rem;
            width: 20rem;
        }
        form>img {
            right: 1.25rem;
            width: 2rem;
        }
        form>div>p:nth-of-type(1) {
            font-size: 1.25rem;
            line-height: 1rem;
        }
        form>div>p:nth-of-type(2) {
            line-height: 0.5rem;
            margin-top: 1rem;
            margin-bottom: 2rem;
        }
        form>div>div>input {
            height: 2rem;
            border-radius: 4px;
            border: 1px solid #CFD0E0;
            width: 16rem;
            font-size: 0.75rem;
            padding: 0 0.625rem;
        }
        form>div>div {
            margin-bottom: 1rem;
        }
        form input[type="submit"] {
            margin-top: 1rem;
            width: 100%;
            height: 2rem;
            line-height: 2rem;
            font-size: 1rem;
        }
        #msg {
            bottom: 1rem;
        }
    }
</style>

<body>
    <div id="login-box">
        <img src="/static/images/loginLeft.png">
        <form method="post">
            <img src="/static/images/loginRight.png">
            <div>
                <div>
                    <label for="login_usr">请输入帐号：</label> <input
                        id="login_usr" name="login_usr"
                        value="${login_usr}" />
                </div>
                <div>
                    <label for="login_pwd">请输入密码：</label> <input
                        id="login_pwd" name="login_pwd" type="password"
                        value="123456" />
                </div>
                <input name="submit" type="submit" value="登录" />
            </div>
            <c:if test="${not empty msg}">
                <div id="msg">${msg}</div>
            </c:if>
        </form>
    </div>
</body>
</html>